import React, { Component } from 'react';
import { Button, Carousel, Image, Row, Col } from 'antd';
import { observer } from 'mobx-react';
import { history } from 'umi';
import styles from './index.less';
import { RightOutlined, CodepenOutlined, SoundOutlined } from '@ant-design/icons';
import Footer from '../components/footer/index';

import carous1 from '../../assets/carous1.png';
import carous2 from '../../assets/carous2.png';
import carous3 from '../../assets/carous3.png';
import carous4 from '../../assets/carous4.png';
import art1 from '../../assets/art1.png';
import art2 from '../../assets/art2.png';
import art3 from '../../assets/art3.png';
import art4 from '../../assets/art4.png';
import art5 from '../../assets/art5.png';
import art6 from '../../assets/art6.png';

import { newsStore } from '@/stores/newsStore';
import NoticeModel from '@/models/notice';
import { noticeStore } from '@/stores/noticeStore';
import NewsIndexModel from '@/models/newsIndex';

// const link3 =
//   "https://cloud.chan3d.com/scenes/086fb788e4ba414aaaeec8854fe87353/index.html";

const link3 = "https://cloud.chan3d.com/scenes/8976b8de93b04b7392d19e939a5ca9ba/index.html"
@observer
export default class Index extends Component {
  componentDidMount() {
    newsStore.listNews();
    newsStore.getCarouselListUp();
    newsStore.getCarouselListDown();
    noticeStore.listNotice();
  }

  // // componentDidMouunt() {
  //   noticeStore.listNotice();
  // }
  handleClick(e) {
    if (e == 3) {
      window.location.href = link3;
    }
  }


  render() {
    /**
     * 最新资讯
     */
    let listNews: Array<NewsIndexModel> = newsStore.newsList;
    newsStore.title = undefined;
    newsStore.organizer = undefined;
    let newsArr = [];
    for (let i = 0; i < listNews?.length; i++) {
      newsArr.push(
        <div className={styles.dispaly_container}>
          <div className={styles.dispaly_time}>{listNews[i].gmtCreate}</div>
          <div className={styles.display_name} onClick={() => history.push({ pathname: "/info", query: { id: listNews[i].id } })}>{listNews[i].title}</div>
          <div className={styles.news_devider}></div>
        </div> as never
      )
    }
    /**
     * 通知公告
     */
    let listNotices: Array<NoticeModel> = noticeStore.noticeList;
    let noticeArray = [];
    for (let j = 0; j < listNotices?.length; j++) {
      noticeArray.push(
        <div className={styles.dispaly_container}>
          <div className={styles.dispaly_time} >{listNotices[j].gmtCreate}</div>
          <div className={styles.display_name} onClick={() => history.push({ pathname: "/noticeInfo", query: { id: listNotices[j].id } })} >{listNotices[j].title}</div>
          <div className={styles.news_devider}></div>
        </div> as never
      )
    }

    return (
      <div>
        <div className={styles.content_box}>
          <div className={styles.header_box}>
            <Row className={styles.tab_bar}>
              {/* <div className={styles.tabbar_list}>logo</div> */}
              <div className={styles.tabbar_list} >首页</div>
              <div className={styles.tabbar_list} onClick={() => { history.push('/appreciation') }}>展示鉴赏</div>
              <div className={styles.tabbar_list} onClick={() => { history.push('/newsAndAnno') }}>新闻资讯</div>
              <div className={styles.tabbar_list} onClick={this.handleClick.bind(this, 3)}>掌上看展</div>
              <div className={styles.tabbar_list} onClick={() => { history.push('/game') }}>绘画比赛</div>
              <div className={styles.tabbar_list} onClick={() => { history.push("/user/login/") }}>注册/登录</div>
            </Row>
            <Carousel autoplay className={styles.carousel}>
              {newsStore.slideShowListUp?.map((item, index) =>
                <div>
                  <Image src={item.cover ? newsStore.imageURL + item.cover : '/404'} preview={false} className={styles.carous_img} />
                </div>
              )}

              {/* <div>
              //   <Image src={carous1} preview={false} className={styles.carous_img} />
              // </div>
              // <div>
              //   <Image src={carous2} preview={false} className={styles.carous_img} />
              // </div>
              // <div>
              //   <Image src={carous4} preview={false} className={styles.carous_img} />
              // </div> */}
            </Carousel>
          </div>
          <div className={styles.middile_card_box}>
            <div className={styles.middle_card_container} onClick={() => { history.push('/appreciation') }}>
              藏品推荐
            </div>
            <div className={styles.middle_card_container} onClick={() => { history.push('/newsAndAnno') }}>
              展览资讯
            </div>
            <div className={styles.middle_card_container} onClick={() => { history.push('/game') }}>
              绘画比赛
            </div>
            <div className={styles.middle_card_container} onClick={this.handleClick.bind(this, 3)}>
              掌上美术馆
            </div>
          </div>
          <div className={styles.display_news_box}>
            <div className={styles.display_box}>
              <Row>
                <Col span={21} className={styles.display_title}><CodepenOutlined style={{ color: '#E70012', fontSize: '20px', marginRight: '10px' }} />近期展览</Col>
                <Col span={3} className={styles.display_more} onClick={() => { history.push('/newsAndAnno') }}>更多<RightOutlined style={{ color: '#E70012', fontSize: '14px', marginLeft: '5px' }} /></Col>
              </Row>
              {newsArr}
            </div>
            <div className={styles.news_box}>
              <Row>
                <Col span={21} className={styles.display_title}><SoundOutlined style={{ color: '#E70012', fontSize: '20px', marginRight: '10px' }} />通知/公告</Col>
                <Col span={3} className={styles.display_more} >更多<RightOutlined style={{ color: '#E70012', fontSize: '14px', marginLeft: '5px' }} /></Col>
              </Row>
              {noticeArray}
            </div>
          </div>
          <div className={styles.carousel_work_container}>
            <Carousel autoplay className={styles.carousel_work}>
              <div className={styles.carousel_work_box}>
                {newsStore.slideShowListUp?.slice(0, 3).map((item, index) =>
                  <Image src={item.cover ? newsStore.imageURL + item.cover : '/404'} preview={false} className={styles.work_img} />
                )}
              </div>
              <div className={styles.carousel_work_box}>
                {newsStore.slideShowListUp?.slice(3, 6).map((item, index) =>
                  <Image src={item.cover ? newsStore.imageURL + item.cover : '/404'} preview={false} className={styles.work_img} />
                )}
              </div>
              <div className={styles.carousel_work_box}>
                {newsStore.slideShowListUp?.slice(6, 9).map((item, index) =>
                  <Image src={item.cover ? newsStore.imageURL + item.cover : '/404'} preview={false} className={styles.work_img} />
                )}
              </div>
            </Carousel>
          </div>
        </div>
        <Footer />
      </div>
    );
  }
}
